<template>
 <div class="user-bg">
    <img src="../../assets/Chat_Gpt/user.png" class="user-ico" alt="">
    <p class="user-mess" v-html="showMessage"></p>
 </div>
</template>

<script setup lang='js' name=''>
import {defineProps,computed} from 'vue'
const props = defineProps(['mess'])
const MESS = computed(()=>{
    return props.mess
})

const showMessage = computed(() => {
    return MESS.value.replace(/\n/g, function () {
        return '<br/>'
    })
})
</script>

<style scoped>
.user-bg{
    width: 92%;
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
    padding-right: 10px;
}
.user-ico{
    width: 40px;
    height: 40px;
    margin-top: 5px;
    background: #FFF;
    border-radius: 50%;
}
.user-mess{
    font-size: 15px;
    background: var(--Chat_Gpt_backGround2);
    color: var(--Chat_Gpt_backGround3);
    line-height: 200%;
    padding: 10px;
    border-radius: 20px;
    word-break: break-all;
}
</style>